<template>
    <div>
        <div v-if="whichTable === 'A'">
            <div class="operation">
                <a class="btn btn-theme" @click="showAddTeamModal">添加团队</a>
                <a class="btn btn-theme" @click="showModifyTeamModal">编辑团队</a>
                <a class="btn btn-theme" @click="showDeleteModal">删除团队</a>
            </div>
            <table class="table" id="teamtable">
                
            </table>
        </div>
        <div v-else>
            <div class="operation">
                <a class="btn btn-theme" @click="changeTable">返回</a>                
                <a class="btn btn-theme" @click="removeUser">移除成员</a>
                <a class="btn btn-theme">邮件邀请</a>
                <a class="btn btn-theme" @click="showInviteModal">站内邀请</a>
            </div>
            <table class="table" id="usertable">
                
            </table>
        </div>
         <div class="modal fade" id="team_add_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                        <div class="modal-dialog " role="document">
                            <div class="modal-content container-fluid">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">添加团队</h4>
                                </div>
                                <div class="modal-body row">
                                    <form id="team_add_form">

                                        <div class="form-group1 col-md-12">
                                            <label for="team_add_teamname" class="control-label">团队名</label>
                                            <input type="text" class="form-control input-sm" name="teamname" id="team_add_teamname">
                                        </div>
                                        <div class="form-group1 col-md-12">
                                            <label for="team_add_type" class="control-label">团队类型</label>
                                            <input type="text" class="form-control input-sm" name="type" id="team_add_type">
                                        </div>

                                        <div class="form-group1 col-md-12">
                                            <label for="team_add_level" class="control-label">级别</label>
                                            <input type="text" class="form-control input-sm" name="level" id="team_add_level">
                                        </div>

                                        <div class="form-group1 col-md-12">
                                            <label for="team_add_status" class="control-label">状态</label>
                                            <input type="text" class="form-control input-sm" name="status" id="team_add_status">
                                        </div>

                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-primary" @click="addTeam">提交</button>
                                </div>
                            </div>
                    </div>
            </div>
             <div class="modal fade" id="team_modify_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content container-fluid">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">编辑团队</h4>
                                </div>
                                <div class="modal-body row">
                                    <form id="team_modify_form">

                                        <div class="form-group1 col-md-12">
                                            <label for="team_modify_teamname" class="control-label">团队名</label>
                                            <input type="text" class="form-control input-sm" name="teamname" id="team_modify_teamname">
                                        </div>
                                        <div class="form-group1 col-md-12">
                                            <label for="team_modify_type" class="control-label">团队类型</label>
                                            <input type="text" class="form-control input-sm" name="type" id="team_modify_type">
                                        </div>

                                        <div class="form-group1 col-md-12">
                                            <label for="team_modify_level" class="control-label">级别</label>
                                            <input type="text" class="form-control input-sm" name="level" id="team_modify_level">
                                        </div>
                                        <div class="form-group1 col-md-12">
                                            <label for="team_modify_status" class="control-label">状态</label>
                                            <input type="text" class="form-control input-sm" name="status" id="team_modify_status">
                                        </div>

                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-primary" @click="modifyTeam">提交</button>
                                </div>
                            </div>
                     </div>
            </div>
            <div class="modal fade" id="team_drop_modal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">删除确定</h4>
                                </div>
                                <div class="modal-body">
                                    <p>您真的要删除此团队吗？</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" @click="deleteTeam">确认</button>
                                </div>
                            </div>
                        </div>
                    </div>
         <div class="modal fade" id="team_invite_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content container-fluid">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="exampleModalLabel">邀请加入团队</h4>
                            </div>
                            <div class="modal-body">
                                <table class="table" id="userOutTeam"></table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary" @click="inviteUsers">发送邀请</button>
                            </div>
                        </div>
                    </div>
                </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                teamtabledata: '',
                usertabledata: '',
                whichTable: 'A',
                outUsers: '',
                currentId: ''
            }
        },
        methods: {
            getTeamTable() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/user/fetchuserteam',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid
                    },
                    async: false,
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        _this.teamtabledata = retdata.Table2
                    }
                });
                var operateEvent = {
                    'click a[name="team"]': function(event, value, row, index) {
                        _this.currentId = row.fteamid
                        _this.getTeamUser()
                    }
                }
                $('.table').bootstrapTable('destroy')
                $('.table').bootstrapTable({
                    columns: [{
                        radio: true
                    }, {
                        field: 'fteamid',
                        title: '团队号',
                        halign: 'center'
                    }, {
                        field: 'ftitle',
                        title: '团队名',
                        halign: 'center'
                    }, {
                        field: 'username',
                        title: '创建人',
                        halign: 'center'
                    }, {
                        field: 'operate',
                        title: '操作',
                        halign: 'center',
                        formatter: '<a class="btn btn-theme btn-xs" name="team">查看成员</a>',
                        events: operateEvent
                    }],
                    data: _this.teamtabledata,
                    pagination: true,
                    onlyInfoPagination: false,
                    striped: true,
                    sortName: 'fidno',
                    sortOrder: 'desc',
                    sidePagination: 'client',
                    pageNumber: 1,
                    pageSize: 10,
                    pageList: [10, 25, 50, 100],
                    smartDisplay: true,
                    search: true,
                    selectItemName: 'team1',
                    searchOnEnterKey: false,
                    strictSearch: false,
                    showHeader: true,
                    clickToSelect: true,
                })
            },
            getUsertable() {
                $('.table').bootstrapTable('destroy')
                $('.table').bootstrapTable({
                    columns: [{
                        checkbox: true
                    }, {
                        field: 'fuserid',
                        title: '员工号',
                        halign: 'center'
                    }, {
                        field: 'username',
                        title: '用户名',
                        halign: 'center'
                    }, {
                        field: 'ftype',
                        title: '团队',
                        halign: 'center'
                    }],
                    data: this.usertabledata,
                    pagination: true,
                    onlyInfoPagination: false,
                    striped: true,
                    sortName: 'fidno',
                    sortOrder: 'desc',
                    sidePagination: 'client',
                    pageNumber: 1,
                    pageSize: 10,
                    pageList: [10, 25, 50, 100],
                    smartDisplay: true,
                    search: true,
                    selectItemName: 'userInTeam',
                    searchOnEnterKey: false,
                    strictSearch: false,
                    showHeader: true,
                    clickToSelect: true,
                })
            },
            changeTable() {
                this.whichTable = 'A'
                this.getTeamTable()
            },
            showInviteModal() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/tteam/fetchinviteuser',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': _this.currentId
                    },
                    async: false,
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        _this.outUsers = retdata.Table2
                    }
                });
                $('#userOutTeam').bootstrapTable('destroy')
                $('#userOutTeam').bootstrapTable({
                    columns: [{
                        checkbox: true
                    }, {
                        field: 'fidno',
                        title: '员工号',
                        halign: 'center'
                    }, {
                        field: 'username',
                        title: '用户名',
                        halign: 'center'
                    }],
                    data: _this.outUsers,
                    pagination: true,
                    onlyInfoPagination: false,
                    striped: true,
                    sortName: 'fidno',
                    sortOrder: 'desc',
                    sidePagination: 'client',
                    pageNumber: 1,
                    pageSize: 10,
                    pageList: [10, 25, 50, 100],
                    smartDisplay: true,
                    search: true,
                    selectItemName: 'userOutTeam',
                    searchOnEnterKey: false,
                    strictSearch: false,
                    showHeader: true,
                    clickToSelect: true,
                })
                $('#team_invite_modal').modal('show')
            },
            inviteUsers() {
                var _this = this
                var ids = $(".selected").map(function(index, elem) {
                    return $(elem).children().eq(1).text()
                }).get().join(',');
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/tteam/inviteusers',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'userids': ids, //要邀请的用户id
                        'teamid': _this.currentId
                    },
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        $('#team_invite_modal').modal('hide');
                        _this.getTeamUser()
                    }
                });
            },
            getTeamUser() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/user/fetchteamuser',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'teamid': _this.currentId,
                    },
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        _this.usertabledata = retdata.Table2
                        _this.whichTable = 'B'
                        _this.getUsertable()
                    }
                });
            },
            removeUser() {
                var _this = this
                var ids = $("input:checkbox[name='userInTeam']:checked").map(function(index, elem) {
                    return $(elem).parent().next().text()
                }).get().join(',');
                if (ids == '') {
                    _this.$store.commit('showModal','请选择要删除的成员')
                } else {
                    $.ajax({
                        type: 'POST',
                        url: 'http://192.168.1.66:808/api/tteam/removeusers',
                        data: {
                            'token': localStorage.token,
                            'userid': localStorage.userid,
                            'userids': ids,
                            'teamid': _this.currentId
                        },
                        crossDomain: true,
                        dataType: 'json',
                        async: false,
                        error: function(request) {
                            _this.$store.commit('showModal','连接错误')
                        },
                        success: function(retdata) {
                            _this.getTeamUser()
                        }
                    });
                }
            },
            showAddTeamModal() {
                $('#team_add_modal').modal('show');
            },
            showModifyTeamModal() {
                $('#team_modify_modal').modal('show');
            },
            showDeleteModal() {
                var ids = $(':radio[name="team1"]:checked').parent().next().text()
                if (ids == '') {
                   this.$store.commit('showModal','请先选择要删除的团队')
                   
                } else {
                    $('#team_drop_modal').modal('show');
                }
            },
            addTeam() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/tteam/add',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'ftitle': $('#team_add_teamname').val(),
                        'ftype': $('#team_add_type').val(),
                        'flevel': $('#team_add_level').val(),
                        'fstatus': $('#team_add_status').val(),
                    },
                    async: true,
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        if (retdata.Table1[0].message == 'ok') {
                            $('#team_add_modal').modal('hide');
                            _this.getTeamTable()
                        }
                    }
                });
            },
            modifyTeam() {
                var _this = this
                var ids = $(':radio[name="team1"]:checked').parent().next().text()
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/tteam/update',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'fidno': ids,
                        'ftitle': $('#team_modify_teamname').val(),
                        'ftype': $('#team_modify_type').val(),
                        'flevel': $('#team_modify_level').val(),
                        'fstatus': $('#team_modify_status').val(),
                    },
                    async: true,
                    dataType: 'json',

                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        if (retdata.Table1[0].status == true) {
                            $('#team_modify_modal').modal('hide');
                            _this.getTeamTable()
                        }
                    }
                });
            },
            deleteTeam() {
                var _this = this
                var ids = $(':radio[name="team1"]:checked').parent().next().text()
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/tteam/delete',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'fidno': ids,
                    },
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        if (retdata.Table1[0].status == true) {
                            $('#team_drop_modal').modal('hide');
                            _this.getTeamTable()
                        }
                    }
                });
            }
        },
        mounted() {
            this.getTeamTable()
        }
    }
</script>
<style>

</style>